import React, { Component } from "react";
import { connect } from "react-redux";
import { NavBar } from "antd-mobile";
import NavLinkBar from "../../component/navlink";
import { Route, Switch,Redirect } from "react-router-dom";
import Boss from '../../component/boss'
import Genius from '../../component/genius'
import User from '../../component/user'
import {getMsgList,recvMsg} from '../../redux/chat.redux'
import Msg from '../../component/msg'
import QueueAnim from 'rc-queue-anim';


@connect(state => state,{
  getMsgList,recvMsg
})
class Dashboard extends Component {
  componentDidMount(){
    if(!this.props.chatuser.chatmsg.length){
      this.props.getMsgList()
      this.props.recvMsg()
    }
  }
  render() {
    const user = this.props.user;
    const { pathname } = this.props.location;
    console.log(pathname);
    const navList = [
      {
        path: "/boss",
        text: "牛人",
        icon: "boss",
        title: "牛人列表",
        component: Boss,
        hide: user.type === "genius"
      },
      {
        path: "/genius",
        text: "boss",
        icon: "job",
        title: "Boss列表",
        component: Genius,
        hide: user.type === "boss"
      },
      {
        path: "/msg",
        text: "消息",
        icon: "msg",
        title: "消息列表",
        component: Msg
      },
      {
        path: "/me",
        text: "我",
        icon: "user",
        title: "个人中心",
        component: User
      }
    ];
    const page = navList.find(v=>v.path==pathname)
    return page? (
      <div>
        <NavBar mode="dark" className="fixd-header">
          {page.title}
        </NavBar>
        <div style={{ marginTop: 45 }}>
            <QueueAnim 
              type='left' 
              ease={['easeOutQuart', 'easeInOutQuart']}
              >
                <Route key={page.path} path={page.path} component={page.component} />
            </QueueAnim>
        </div>
        <NavLinkBar data={navList} />
      </div>
    ):<Redirect to='/msg'></Redirect>;
  }
}

export default Dashboard;
